<template>
	<view class="detail">
		<view class="detail-form">
			<view class="detail-form-item">
				<view class="detail-form-item-left">
					订单编号
				</view>
				<view class="detail-form-item-right">
					{{orderNo}}
				</view>
			</view>	
			<view class="detail-form-item">
				<view class="detail-form-item-left">
					客户名称
				</view>
				<view class="detail-form-item-right">
					{{detailsData.buyerCompanyName}}
				</view>
			</view>
			<view class="detail-form-item">
				<view class="detail-form-item-left">
					状态
				</view>
				<view class="detail-form-item-right">
					配送中
				</view>
			</view>
		</view>
		<view class="detail-titleTag">
			<view class="detail-icon"></view>物流配送
		</view>
		<view class="detail-form">
			<view class="detail-form-item">
				<view class="detail-form-item-left">
					快递公司
				</view>
				<view class="detail-form-item-right">
					{{detailsData.logisticsCompany}}
				</view>
			</view>	
			<view class="detail-form-item">
				<view class="detail-form-item-left">
					快递单号
				</view>
				<view class="detail-form-item-right">
					{{detailsData.logisticsNo}}
				</view>
			</view>
			<view class="detail-form-item">
				<view class="detail-form-item-left">
					发货时间
				</view>
				<view class="detail-form-item-right">
					{{detailsData.sendTime}}
				</view>
			</view>
		</view>
		<view class="detail-titleTag">
			<view class="detail-icon"></view>采购物料
		</view>
		<view class="purchase" v-for="item,index in detailsData.materials" :key='item.id'>
			<view class="purchase-name">
				<view>{{item.materialShortName}}</view>
				<view>查看物流</view>
			</view>
			<view class="purchase-info">
				<image src="@/static/image/people_icon.png"></image>
				<view class="purchase-info-box">
					<view class="purchase-info-box-num">
						<view>{{item.materialNo}}</view>
						<view>发货数量:{{item.materialCount}}</view>
					</view>
					<view>单位：{{item.materialUnit}}</view>
				</view>
			</view>
			<view class="purchase-remark">
				备注：{{item.remark}}
			</view>
		</view>
		
		
		<view class="detail-titleTag">
			<view class="detail-icon"></view>发货人
		</view>
		<view class="deliverGoods">
				<view>发货人：{{detailsData.sendUserName}}</view>
				<view>发货人地址：{{detailsData.sendAdds}}</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	export default {
		data() {
			return {
				orderID:"",
				orderNo:"",
				detailsData:{}
			}
		},
		onLoad(option){
			let data = JSON.parse(decodeURIComponent(option.data))
			this.orderID = data.id
			this.orderNo = data.orderNo
			this.gitInit()
		},
		methods:{
			gitInit(){
				api.getLogisticsDetails(this.orderID).then(res=>{
					if(res.code == 0){
						this.detailsData = res.data
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.detail{
		background-color: #eaeaea;
		&-titleTag,&-releaseRecord{
			display: flex;
			align-items: center;
			padding: 10rpx 0;
			margin-top: 30rpx;
			font-size: 34rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #f5f5f5;
			.detail-icon{
				width: 8rpx;
				height: 30rpx;
				margin: 0 15rpx;
				background-color: #30a875;
			}
		}
		&-releaseRecord{
			margin-top: 25rpx;
			background-color: #fff;
			justify-content: space-between;
			&-left{
				display: flex;
				align-items: center;
			}
			&-right{
				font-size: 26rpx;
			}
		}
		&-form{
			line-height: 80rpx;
			padding: 10rpx 20rpx;
			background-color: #fff;
			&-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #f5f5f5;
				&-left{
					color: #939393;
				}
			}
			&-item:last-child{
				border-bottom: none;
			}
		}
		
		.purchase{
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 5rpx;
			&-name{
				color: #000;
				font-weight: 700;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			&-info{
				display: flex;
				margin: 25rpx 0;
				&-box{
					flex: 1;
					color: #939393;
					font-size: 24rpx;
					&-num{
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
				image{
					width: 100rpx;
					height: 100rpx;
					margin-right: 15rpx;
				}
			}
			&-remark{
				color: #939393;
			}
		}
		.deliverGoods{
			color: #939393;
			line-height: 50rpx;
			background: #fff;
			padding: 15rpx 35rpx;
			font-size: 26rpx;
		}
	}
</style>
